<template>
  <div>
    <div class="time-horizontal">
      <div
        class="test_bar"
        :style="`width:${barWidth}px;height:${barSize}px;bottom:-${barSize%2==0?barSize/2:Math.ceil(barSize/2)}px`"
      >
        <div class="barHeart" :style="`width:${barheartWidth}px;`"></div>
      </div>
      <div
        v-for="(item,index) in list"
        :key="index"
        class="horizontal-item"
        ref="items"
      >
        <div
          class="horizontal-circle"
          :style="`width:${size}px;height:${size}px;left: -${size/2}px;
          bottom:-${size%2==0?size/2:Math.ceil(size/2)}px;
          background-color:${index<=currentIndex?circleActiveBg:circleBg}`"
        ></div>
        <div class="horizontal-label" :style="labelStyle">{{item.label}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import myMixin from "../mixin";
export default {
  mixins: [myMixin],
  data() {
    return {
      barWidth: 0,
      barheartWidth: 0
    };
  },
  mounted() {
    let itemWidth = this.$refs.items[0].offsetWidth;
    this.barWidth = itemWidth * (this.$refs.items.length - 1);
    this.barheartWidth = this.currentIndex*itemWidth;
  }
};
</script>
<style lang="less" scoped src='./index.less'></style>
